<template>
    <div class="shopcar-container">
        <div class="goods-list">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                    <mt-switch v-model="$store.getters.getGoodsSelected[1]"
                    @change="selectedChange(1,$store.getters.getGoodsSelected[1])"></mt-switch>
                    <img src="https://gw.alicdn.com/bao/uploaded/i4/3174739641/O1CN01Eflayv2L5cyAg47fH_!!3174739641.jpg" alt="">
                    <div class="info">
                        <h1>Xiaomi/小米 小米9 全面屏SE骁龙855</h1>
                        <p>
                            <span class="price">￥2399</span>
                            <numbox :initcount="$store.getters.getGoodsCount[1]"></numbox>
                            <a href="#" >删除</a>
                        </p>
                    </div>
                    </div>
                </div>
            </div>



            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner jiesuan">
                        <div class="left">
                            <p>总计</p>
                            <p>已勾选商品<span class="red">0</span>件，总价<span class="red">￥0</span></p>
                            
                        </div>
                        <mt-button type="danger">去结算</mt-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import numbox from '../subcomponents/shopcar_numbox.vue'
export default{
    data(){
        return {

        }
    },
    methods:{
        getGoodsList(){
            var idArr=[]
         this.$store.state.car.forEach(item => {
                
            });   
        },
        selectedChange(id,value){
            this.$store.commit('updateSelected',{id:1,selected:value})
        }
    },
    components:{
        numbox
    }
}
</script>
<style lang="scss" scoped>
.shopcar-container{
    background-color: #eee;
    overflow: hidden;
   .goods-list{
       .mui-card-content-inner{
           display: flex;
           align-items: center; 
       }
       img{
           width: 60px;
           height:60px;
       }
      h1{
          font-size: 13px;
      }
      .info{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .price{
              color: red;
              font-weight:bold;
          }
      }
   }
   .jiesuan{
       display: flex;
       justify-content: space-between;
       align-items: center;
       .red{
           color:red;
       }
   } 
}


</style>
